{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册</title>

</head>


<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.0/dist/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.0/dist/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
 <script src="http://lib.sinaapp.com/js/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<link rel="stylesheet" href="../../static/css/register.css">
<body>
<div>
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <li class="nav-item active">
        <a class="nav-link text-danger logo" href="/books/index">简书<span class="sr-only">(current)</span></a>
      </li>
  </div>
</nav>

<form action="{% url 'blog:regs' %}" method="post" id="new_user">

{% csrf_token %}
    <ul class="list-group">
        <h5>注册</h5>
        <div class="msg" style="color: red">{{ err_msg }}</div>
  <li class="list-group-item list-group-item-dark"><svg  class="iconn" width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-person" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
  <path fill-rule="evenodd" d="M10 5a2 2 0 1 1-4 0 2 2 0 0 1 4 0zM8 8a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm6 5c0 1-1 1-1 1H3s-1 0-1-1 1-4 6-4 6 3 6 4zm-1-.004c-.001-.246-.154-.986-.832-1.664C11.516 10.68 10.289 10 8 10c-2.29 0-3.516.68-4.168 1.332-.678.678-.83 1.418-.832 1.664h10z"/>
</svg><input placeholder="你的昵称" type="text" name="nname" id="nname"></li>

  <li class="list-group-item list-group-item-dark"><svg class="iconn" width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-phone" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
  <path fill-rule="evenodd" d="M11 1H5a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1zM5 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H5z"/>
  <path fill-rule="evenodd" d="M8 14a1 1 0 1 0 0-2 1 1 0 0 0 0 2z"/>
</svg><input placeholder="手机号" type="text" name="phone" id="phone"></li>

  <li class="list-group-item list-group-item-dark"><svg class="iconn" width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-bag" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
  <path fill-rule="evenodd" d="M0 4a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V4zm2-1a1 1 0 0 0-1 1v.217l7 4.2 7-4.2V4a1 1 0 0 0-1-1H2zm13 2.383l-4.758 2.855L15 11.114v-5.73zm-.034 6.878L9.271 8.82 8 9.583 6.728 8.82l-5.694 3.44A1 1 0 0 0 2 13h12a1 1 0 0 0 .966-.739zM1 11.114l4.758-2.876L1 5.383v5.73z"/>
</svg><input placeholder="邮箱" type="email" name="email" id="email"></li>

        <li class="list-group-item list-group-item-dark">
                        <input type="text" name="VCode" class="login_input" placeholder="验证码" style="width:90px" id="checkemail">
            <button type="button" class="check_email_button" id="check_email_button" style="width:110px">获取验证码</button>
				    </li>

  <li class="list-group-item list-group-item-dark"><svg class="iconn" width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-bag" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
  <path fill-rule="evenodd" d="M8 1a2.5 2.5 0 0 0-2.5 2.5V4h5v-.5A2.5 2.5 0 0 0 8 1zm3.5 3v-.5a3.5 3.5 0 1 0-7 0V4H1v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V4h-3.5zM2 5v9a1 1 0 0 0 1 1h10a1 1 0 0 0 1-1V5H2z"/>
  </svg><input placeholder="设置密码" type="password" name="pwd" id="password"></li>

        <li class="list-group-item list-group-item-dark"><svg class="iconn" width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-bag" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
  <path fill-rule="evenodd" d="M8 1a2.5 2.5 0 0 0-2.5 2.5V4h5v-.5A2.5 2.5 0 0 0 8 1zm3.5 3v-.5a3.5 3.5 0 1 0-7 0V4H1v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V4h-3.5zM2 5v9a1 1 0 0 0 1 1h10a1 1 0 0 0 1-1V5H2z"/>
  </svg><input placeholder="确认密码" type="password" name="#confrim_pwd" id="password"></li>
<input type="button" id="sign_up_btn" name="commit" value="注册">
</ul>

</form>
    </div>
</body>
</html>
<script src="https://libs.baidu.com/jquery/2.0.0/jquery.js"></script>
<script type="text/javascript">

    $(function () {
        $('input').attr('autocompelete','off');
        $('#sign_up_btn').click(function () {
            if (check()) {
                $('#new_user').submit()

            }
        })


           $("#nname").blur(function () {

            var name = $("#nname").val()

            $.ajax({
                url: "/chk_nname?nick=" + name,
                type: "get",

                success: function (data) {
                    if (data.result != "ok") {
                        $(".msg").text("用户名[" + name + "]已经存在")
                        $("#nname").val("")
                    } else {
                        $(".msg").text("")
                    }

                }
            })
        })


    let check_data='';
    $(".check_email_button").click(function () {
        {#debugger;#}
        $('.msg').text('');
        if($('#email').val()==null){
            $(".msg").text("该处输入不能为空");
            $(".msg").text("请输入"+$("#email").attr('placeholder'));
            return false
        }
        else {
            {#debugger;#}
            const email_val = $ ('#email').val();
            $.ajax(
                {
                    url:'/books/check_email?email='+email_val,
                    type:"get",
                    success:function (data) {
                        check_data=data.check;
                        console.log(check_data)
                    }
                }
            )
            }
    });



    function check() {

             $("input").each(function () {
                 if ($.trim($(this).val()) == "") {
                     $(".msg").text("请输入" + $(this).attr("placeholder"))
                     return false
                 }
             })
             if (!checkPhone($("#phone"))) {
                 $(".msg").text("手机格式不正确")
                 return false
             }
             if (!checkmail($("#email"))) {
                 $(".msg").text("邮箱格式不正确")
                 return false
             }
             if ($.trim($("#confrim_pwd").val())!=$.trim($("#pwd").val())){
                 $(".msg").text("两次密码不匹配")
                 return false
             }
             if($("#checkemail").val() !=check_data )
             {
                 $(".msg").text("验证码输入错误，重新输入")
                 return false
             }
             return true
         }


         function checkmail(obj) {
             var email =obj.val();
             var reg=/^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/;
             return reg.test(email)
         }

         function checkPhone(obj) {
             var phone =obj.val();
             return /^1(3|4|5|6|7|8|9)\d{9}$/.test(phone)
         }
    })
    </script>

